<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>信息管理</title>

<link type="text/css" rel="stylesheet" href="../scripts/jqui/css/jquery.ui.css" />
<link type="text/css" rel="stylesheet" href="../scripts/jqgrid/css/jqgrid.ui.css" />
<link href="../style/main.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="../scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../scripts/jqgrid/i18n/grid.locale.js"></script>
<script type="text/javascript" src="../scripts/jqgrid/jqgrid.js"></script>
<script type="text/javascript" src="../scripts/bbs.js"></script>
<script type="text/javascript" src="../scripts/bg.js"></script>

 <script type="text/javascript">
 <!--
 
 // $(document).ready(function () {
        
 //        var kinds = jqSelect('${contextPath}/site/Enum-wordbooktypes.htm');
 //        var topkinds = jqSelect('${contextPath}/site/Enum-allwordbooks.htm');
 //        $("#grid").bindGrid({
 //            _oname:"wordbook",
 //            url:"${contextPath}/bg/BgMgr-listWordbooks.htm",
 //            editurl:"${contextPath}/bg/BgMgr-saveWordbook.htm",
 //            pager: '#pager',
 //            sortname: 'id',
 //            sortorder: "desc",
 //            caption:"消息管理",         
 //            colModel:[
 //                {name:'id',label:'id',index:'L_id',hidedlg:true,hidden:true,editable: true},
 //                {name:'name',label:'名称', index:'S_name',align:'center',
 //                    hidedlg:true,
 //                    editable:true,
 //                    formoptions:{elmprefix:'(*)'},
 //                    editrules: {required: true }
 //                },
 //                {name:'kind',label:'类型',index:'I_kind',width:60, editable:true,
 //                    edittype:'select',
 //                    formatter:'select',
 //                    editoptions:{value:kinds},
 //                    formoptions:{elmprefix:'&nbsp;&nbsp;&nbsp;&nbsp;'},
 //                    search:true,
 //                    stype:'select',
 //                    searchoptions:{value:kinds}
 //                },
                
 //                {name:'parentId',label:'上层结点',index:'I_parentId',width:60, editable:true,
 //                    edittype:'select',
 //                    formatter:'select',
 //                    editoptions:{value:topkinds},
 //                    formoptions:{elmprefix:'&nbsp;&nbsp;&nbsp;&nbsp;'},
 //                    search:true,
 //                    stype:'select',
 //                    searchoptions:{value:topkinds}                  
 //                },
 //                {name:'hidden',label:'是否隐藏',index:'B_hidden',align:'center',width:60, editable:true,
 //                    edittype:'select',
 //                    formatter:'select',
 //                    editoptions:{value:"false:显示;true:隐藏"},
 //                    formoptions:{elmprefix:'&nbsp;&nbsp;&nbsp;&nbsp;'},
 //                    search:true,
 //                    stype:'select',
 //                    searchoptions:{value:"false:显示;true:隐藏"}
 //                }               
 //            ]
 //        }).bindGridNav('#pager',{},{
 //             beforeInitData: function(form) {
 //                 //$('#tr_wordbook\\.id', form).hide();
 //             },
 //        },{
 //             beforeInitData: function (form) {
 //                //$('#tr_wordbook\\.id', form).show();
 //            }
 //        });
 //    });


    
 //-->
 </script>
 

 
</head>
<body>
    <table class="search-table" width="99%" cellspacing="0" cellpadding="0" border="0">
        
        <tbody >            
            <tr>
                <td class="search-table-bg">
                    fdsfsdfsd
                </td> 
                <td style="width:65px;">申请类型:</td>
                <td style="width:15%;">
                    <select>
                        <option>全部 </option>
                    </select>
                </td>
                <td style="width:9%;">申请日期:</td>
                <td style="width:15%;">
                    <input type="text" class="datepicker">
                </td>
                <td style="width:17%;">至
                  <input type="text" class="datepicker">
                </td>
                <td style="width:8%;">
                    申请人:
                </td>
                <td style="width:20%;">
                    <input type="text">
                </td>
                <td style="text-indent:-999em;">剩余</td>
                
            </tr>
            <tr>
                <td class="search-table-bg">
                    fsdfsdf
                </td> 
                <td>审批状态:</td>
                <td><select>
                        <option>全部 </option>
                    </select>
                </td>
                <td>
                    <span>申批日期:</span>
                </td>
                <td>
                     <input type="text" class="datepicker">
                </td>
                <td>至
                     <input type="text" class="datepicker">
                </td>
                <td colspan="2" style="text-align: right;">
                    <button name="search_btn">查 询</button>
                </td>
                
            </tr>
            <tr>
                <td class="search-table-bg">
                    fsdfsdfsdf
                </td> 
                <td>审批状态:</td>
                <td>
                    <select>
                        <option>全部 </option>
                    </select>

                </td>
                <td>
                    <span>城市:</span>
                </td>
                <td>
                     <select>
                        <option>杭州市 </option>
                    </select>
                </td>
                <td>至
                     <input type="text" class="datepicker">
                </td>
                <td colspan="2" style="text-align: right;">
                    <button name="search_btn">查 询</button>
                </td>
                
            </tr>
            <tr>
                <td class="search-table-bg">
                    fsdfsdfsdf
                </td> 
                <td>审批状态:</td>
                <td><select>
                        <option>全部 </option>
                    </select>
                </td>
                <td>
                    <span>申批日期:</span>
                </td>
                <td>
                     <input type="text" class="datepicker">
                </td>
                <td>至
                     <input type="text" class="datepicker">
                </td>
                <td colspan="2" style="text-align: right;">
                    <button name="search_btn">查 询</button>
                </td>
                
            </tr>
        </tbody>
    </table>
    

    <div id="box" style="width:99%;border: 1px solid #D1D1D1;">
        <div class="main-grid">
            按钮：
            <button name="update_btn">刷新1</button>
            <button name="edit_btn">编辑2</button>
            <button name="delete_btn">删除3</button>
            <button name="add_btn">增加4</button>
        </div>
        <table id="list">
        </table>

        <div id="pager"></div>
    </div>


<script type="text/javascript">
var json_data={
    "page":1,
    "total":4,
    "records":"20",
    "rows":[
        {"id":"24","cell":["24","\u5e97\u5c0f\u4e8c","xiaoer@423423423.com","Road23fsdfds345"]},
        {"id":"23","cell":["23","\u4ee4\u72d0\u51b2","huchogn@423423423.com","Road22fsdfd5"]},
        {"id":"22","cell":["22","\u4e1c\u65b9\u4e0d\u8d25","dongfangbubai@423423423.com","Road21fdsfsd45"]},
        {"id":"21","cell":["21","\u8001\u987d\u7ae5","wantong@423423423.com","Road20fsdfsd45"]},
        {"id":"20","cell":["20","\u963f\u7d2b","azi@423423423.com","Road15345345"]}
    ]
}
$(document).ready(function () {

    jQuery("#list").jqGrid({
        url:json_data,
        datatype: "json",
        colNames: ['ID', 'Name','Email', 'Address'],
        colModel: [
        { name: 'ID', index: 'ID', width: 50, align: "left"},
        { name: 'Name', index: 'Name', width: 70, align: "center", editable:true},
        { name: 'Email', index: 'Email', width: 150, align: "center", editable:true },
        { name: 'Address', index: 'Address', width: 150, align: "center", editable:true }
        ],
        rowNum:20,
        rowList:[5,10,20],
        pager: '#pager',
        viewrecords: true,
        sortname: 'ID',
        sortorder: "desc",
        //caption:"Basic Example",
        editurl:"someurl.php",
        autowidth: true,
        height: "auto",
        gridComplete:function(){
            //alert(111);
            $("#list").setGridWidth($("#box").width()*1);
        }
    });
    jQuery("#list").jqGrid('navGrid','#pager',{edit:true,add:true,del:true});

    //自适应外面容器 id=box 的宽度时，必须得写
    $(window).resize(function(){
        $("#list").setGridWidth($("#box").width()*1);
    });　


})

</script>
<div>
  <table id="grid">
  </table>
  <div id="pager"></div>
</div>
</body>
</html>